/**
 * Created by fandongyang on 2017/7/26.
 */
import React, {Component} from 'react';
import {Dimensions, View, Text, StyleSheet, TouchableOpacity, SectionList, Image} from 'react-native' ;
import Icon from 'react-native-vector-icons/MaterialIcons';
import {Thumbnail} from 'native-base';
import {
    getTheme
} from 'react-native-material-kit';
import {ENTRIES1, ENTRIES2} from '../../static/entries';

const {width} = Dimensions.get('window');
const theme = getTheme();

class Index extends Component {
    // 默认属性
    static defaultProps = {};

    // 属性类型
    static propTypes = {};


    // 自定义方法
    handle() {

    }

    componentDidMount() {
        this.initData(1);
    }

    state = {
        tabIndex: 0,
        blurType: 'dark',
        sections: [],
        isLoaded: false
    }
    selectTab = (idx) => {

        if (idx !== this.state.idx) {
            this.setState({
                tabIndex: idx
            })
            this.initData(idx + 1);
        }
    }
    onRefresh = () => {
        this.initData(this.state.tabIndex + 1);
    }
    initData = (type) => {

        const sections = [];

        for (let i = 0; i < 1; i++) {
            let datas = [];
            for (let j = 0; j < 20000; j++) {
                datas.push(
                    {
                        name: type === 1 ? '用户' : type === 2 ? '注册' : '测试',
                        phone: '01234567890',
                        imageUrl: 'https://unsplash.it/400/200/?random'
                    }
                );
            }
            sections.push({key: i, data: datas});
            this.setState({
                sections: sections,
                isLoaded: true
            })
            console.log('数据结构是===>', sections)
        }
    }

    _renderSectionHeader = () => {
        const {tabIndex} = this.state;
        return (
            <View style={{
                flexDirection: 'row', height: 50, justifyContent: 'space-around',
                backgroundColor: 'white', borderBottomWidth: StyleSheet.hairlineWidth,
                borderBottomColor: '#E7E7E7'
            }}>
                <TouchableOpacity activeOpacity={0.8}
                                  onPress={() => this.selectTab(0)}
                                  style={[styles.tab, tabIndex === 0 && styles.selectedTab]}>
                    <Text style={styles.tabText}>行程</Text>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8}
                                  onPress={() => this.selectTab(1)}
                                  style={[styles.tab, tabIndex === 1 && styles.selectedTab]}>
                    <Text style={styles.tabText}>印象</Text>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8}
                                  onPress={() => this.selectTab(2)}
                                  style={[styles.tab, tabIndex === 2 && styles.selectedTab]}>
                    <Text style={styles.tabText}>收藏</Text>
                </TouchableOpacity>


            </View>
        )
    }

    _renderItem = (info) => {
        return (
            <View>
                {/*  <Text key={info.item.title}>{info.item.name}</Text>
                <Text>{info.item.phone}</Text>*/}
                <View style={theme.cardStyle}>
                    <Image source={{uri: info.item.imageUrl}}
                           style={[theme.cardImageStyle, {margin: 5, borderRadius: 5}]}/>
                    <Text style={[theme.cardTitleStyle, {color: "white"}]}>{info.item.name}</Text>
                    <Text style={theme.cardContentStyle}>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Mauris sagittis pellentesque lacus eleifend lacinia...
                    </Text>
                    <View style={theme.cardMenuStyle}/>
                    <Text style={theme.cardActionStyle}>My Action</Text>
                </View>

            </View>
        )
    }

    _separatorCom = () => {
        return (
            <View style={{height: 4, width: 500, backgroundColor: 'orange'}}/>
        )
    }

    // 渲染
    render() {

        const {sections, isLoaded} = this.state;
        return (
            <View style={styles.defaultView}>

                <View style={{
                    flexDirection: "row",
                    justifyContent: "space-between",
                    backgroundColor: "#2E353D",
                    height: 50,
                    alignItems: 'center',
                    paddingTop: 0
                }}>
                    <TouchableOpacity
                        onPress={() => this.props.navigation.navigate('Login', {title: '登录', isVisible: true})}
                        style={{
                            width: width / 5,
                            height: 50,
                            justifyContent: 'center',
                            paddingLeft: 20
                        }}>
                        <Icon name="person" size={25}
                              color='white'/>
                    </TouchableOpacity>
                    <View style={{
                        width: width / 5 * 3,
                        height: 50,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}>

                        <Text style={{color: 'white', fontSize: FONT_SIZE(20)}}>我的</Text>
                    </View>
                    <TouchableOpacity style={{
                        width: width / 5,

                        height: 50,
                        justifyContent: 'center',
                        paddingRight: 20,
                        alignItems: 'flex-end'
                    }}>
                        <Icon name="local-post-office" size={25}
                              color='white'/>
                    </TouchableOpacity>

                </View>
                {
                    isLoaded && <SectionList
                        renderSectionHeader={() => this._renderSectionHeader()}
                        renderItem={this._renderItem}
                        sections={sections}
                        refreshing={false}
                        onRefresh={() => this.onRefresh()}
                        /* ItemSeparatorComponent={() => this._separatorCom()}*/
                        SectionSeparatorComponent={() => <View style={{height: 20, backgroundColor: 'blue'}}/>}
                        keyExtractor={(item, index) => ("index" + index + item)}
                        onEndReached={(info) => {
                            alert("到达底部")
                        }}
                        onEndReachedThreshold={0}
                        stickySectionHeadersEnabled={true}
                        ListHeaderComponent={() => <View
                            style={{alignItems: 'center', padding: 20}}>
                            <Thumbnail large
                                       source={{uri: 'https://ws4.sinaimg.cn/large/006tNc79ly1fik9lzcfhrj30ci0ciweu.jpg'}}/>
                            <Text>Bean</Text>
                        </View>}
                        ListFooterComponent={() => <View style={{backgroundColor: '#888', alignItems: 'center'}}><Text>所有数据如上</Text></View>}
                    />
                }

            </View>
        )

    }

}

let styles = StyleSheet.create({
    image: {
        position: 'absolute',
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
        resizeMode: 'cover',
        width: null,
        height: null,
    },
    blurView: {
        position: 'absolute',
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
    },
    menu: {
        height: 100
    },
    tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    tabText: {
        fontSize: 15,
        color: '#888',
    },
    selectedTab: {
        borderBottomWidth: 3,
        borderBottomColor: '#3ECB9A',
    },
    defaultView: {
        flex: 1,
        backgroundColor: '#fff'
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
})

export default Index;
